<template>
  <div id="echarts_demo1">

    <!--新建展示图表的容器-->
    <div ref="echartsRef" style="width: 600px; height: 350px; border: 1px solid gray;"></div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            xData: [],
            yValue: [],
            objData: [],
            echartsObj: {}
        }
    },
    methods: {
        initEcharts() {
            // 初始化图表对象到指定的容器中
            this.echartsObj = this.$echarts.init(this.$refs['echartsRef'])
             
            // 创建图表参数
            // var option = {
            //     xAxis: {
            //         type: 'category',
            //         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: [
            //         {
            //         data: [1200, 200, 15000, 80, 70, 110, 1300],
            //         type: 'bar'
            //         }
            //     ]
            // };

            // this.echartsObj.setOption(option)

        },
        async getCountByFactoryName() {
           const {data: res} = await this.$http.get('/design/file/countByFactoryName')
           this.objData = res

           this.xData = []
           this.yValue = []

            // 初始化xData和yValue
            for(let i=0; i<this.objData.length; i++) {
                this.xData.push(this.objData[i].factoryName)
                this.yValue.push(this.objData[i].count)
            }

            //设置参数到图表对象上
            this.echartsObj.setOption({
                xAxis: {
                    type: 'category',
                    data: this.xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.yValue,
                        type: 'bar'
                    }
                ]
            })
        }
    },
    mounted() {
        this.initEcharts()
    },
    created() {
        this.getCountByFactoryName()
    }
}
</script>

<style>

</style>